<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebsocketHello</title>
</head>
<body style="text-align: center">

<script>

    // websocket
    let socket;
    if (!window.WebSocket) {
        alert("xxx");
    } else {
        socket = new WebSocket("ws://localhost:7777/hello");

        // on open
        socket.onopen = function () {
            let rt = document.getElementById('responseText');
            rt.value = 'connected';
        };
        // on close
        socket.onclose = function () {
            let rt = document.getElementById('responseText');
            rt.value = rt.value + '\n' + 'closed';
        };
        // read msg
        socket.onmessage = function (ev) {
            let rt = document.getElementById('responseText');
            rt.value = rt.value + '\n' + ev.data;
        };

    }

    function send(msg) {
        if (!socket) {
            return;
        }
        if (socket.readyState === WebSocket.OPEN) {
            socket.send(msg);
            document.getElementById('message').value = '';
        }
    }
</script>

<form onsubmit="return false;">
    <label>
        <textarea id="message" name="message" style="width: 300px; height: 100px"></textarea>
    </label>
    <input type="button" value="send" onclick="send(this.form.message.value)">

    <br>
    <label>
        <textarea id="responseText" style="width: 300px; height: 400px"></textarea>
    </label>
    <input type="button" value="clear" onclick="document.getElementById('responseText').value = '';">
</form>

</body>
</html>